// 全局左侧导航栏样式
$menuColor: var(--cover-color);
$borderRaduis: 5px;
$menuPadding: 8px;

.gl-menu {
  background-color: $menuColor;
  padding-top: 15px;

  .gl-menu-container {
    width: 100%;

    .gl-menu-item {
      padding-left: $menuPadding;
      padding-right: $menuPadding;
      width: calc(100% - $menuPadding);
    }

    .gl-menu-icon {
      width: 1.2rem;
      height: 1.2rem;
      margin-right: 5px;
    }
  }
}

.el-menu {
  border-right: unset;
  background-color: $menuColor;
}

.el-menu-item {
  width: 100%;
  display: flex;
  transition: none;
  background-color: $menuColor;
  color: var(--second-text-color);
  border-radius: $borderRaduis;
  margin-bottom: 5px;

  &[class*='is-active'] {
    background-color: var(--light-color) !important;
    border-radius: $borderRaduis;
    color: white !important;

    svg {
      color: white !important;
    }
  }

  &:hover {
    background-color: rgba(#0052d9, 0.15);
    color: var(--light-color);

    svg {
      color: var(--light-color);
    }
  }
}

.el-sub-menu {
  background-color: $menuColor;
}

.el-sub-menu__title {
  transition: none;
  color: var(--second-text-color);
  border-radius: $borderRaduis;
  margin-bottom: 5px;
  //   padding-left: 8px !important;

  &:hover {
    background: rgba(#0052d9, 0.15);
    color: var(--light-color);

    svg {
      color: var(--light-color);
    }
  }
}
